<template>
	<view style="display: flex;flex-direction: column; justify-content: center;height: 100%;">
		<view style="flex-grow: 1;flex-shrink: 1;overflow-y: auto;background-color: #EEEEEE;">
			<view v-for="(msg, idx) in msgs" :key="idx" class="block">
				<view v-if="msg.type=='dialog'" class="msg"
				 :style="{flexDirection:msg.self?'row-reverse':'row'}">
					<cmd-avatar :src="msg.avatar" size="md"></cmd-avatar>
					<view class="content" @longtap.prevent="showmnu(idx)">
						<view v-if="msg.MIME=='text'" class="text-msg" v-html="msg.msg"></view>
						<image @click="previewImg(idx)" lazy-load webp v-else-if="msg.MIME=='image'" 
						 :src="msg.url" mode="heightFix"></image>
						<image lazy-load webp v-else-if="msg.MIME=='emoji'" mode="heightFix"
						class="msg" :src="`https://images-1256063599.cos.ap-shanghai.myqcloud.com/emojis/${msg.emoji}.svg`"
						 ></image>
						 <view v-else-if="msg.MIME=='file'" class="file-msg">
							 <image src="../../static/default_file_icon.svg" mode="heightFix"></image>
							 <view>
								 <view>{{msg.name}}</view>
								 <progress color="#4CD964" percent="100" show-info />
							 </view>
						 </view>
						 <block v-else-if="msg.MIME=='tuya'">
							 <image :ref="msg.id" :id="msg.id" v-if="!msg.nofuzy" :src="msg.dataurl" mode="widthFix" 
							 style="background-color: white;max-width: 500rpx;"></image>
						 </block>
						 <view v-else-if="msg.MIME=='location'" class="loc-msg">
							 <map @tap="openLocation(idx)" scale="20" show-location :latitude="msg.latitude" :longitude="msg.longitude" style="width:100%;height: 400rpx;"></map>
							 <h3>{{msg.name}}</h3>
							 <view>{{msg.address}}</view>
							 <button type="primary" @click="openLocation(idx)">查看详情</button>
						 </view>
						 <view v-else-if="msg.MIME=='shake'" class="shake-msg" @click="vibrate">
							 <image :draggable="false" src="../../static/shake.svg" mode="heightFix" style="height: 1.5em;"></image>
							 <text>抖一抖</text>
						 </view>
						 <video show-fullscreen-btn objectFit="contain" class="msg" show-center-play-btn loop http-cache enable-play-gesture enable-progress-gesture controls 
						 v-else-if="msg.MIME=='video'" :src="msg.url" :poster="msg.poster || ''"
						 ></video>
						 <red-package :text="msg.text" :money="msg.money"
						 v-else-if="msg.MIME=='redpackage'"
						 ></red-package>
						<view class="statuses" v-if="msg.self">
							<uni-tag :text="msg.status" type="success" size="small"></uni-tag>
						</view>
					</view>
				</view>
				<center v-else-if="msg.type=='time'" class="time">{{msg.time}}</center>
				<center v-else-if="msg.type=='withdraw'" class="time">{{msg.who}}撤回了一条消息</center>
			</view>
		</view>
		<view class="send">
			<view class="text-helper">
				<image @click="appendSup" src="../../static/sup.svg" mode="heightFix" :style="{backgroundColor:textStyle=='sup'?'white':''}"></image>
				<image @click="appendSub" src="../../static/sub.svg" mode="heightFix" :style="{backgroundColor:textStyle=='sub'?'white':''}"></image>
				<image @click="appendCenter" src="../../static/center.svg" mode="heightFix" :style="{backgroundColor:textStyle=='center'?'white':''}"></image>
				<image @click="appendBold" src="../../static/bold.svg" mode="heightFix" :style="{backgroundColor:textStyle=='bold'?'white':''}"></image>
				<image @click="appendBackcol" src="../../static/backcol.svg" mode="heightFix" :style="{backgroundColor:textStyle=='backcol'?'white':''}"></image>
				<image src="../../static/ol.svg" mode="heightFix"></image>
				<image src="../../static/ul.svg" mode="heightFix"></image>
				<image @click="appendHr" src="../../static/hr.svg" mode="heightFix"></image>
			</view>
			<view class="input-area">
				<edit-div ref="input" @input="inputing" @click="tab=''"></edit-div>
				<button type="primary" size="mini" @click="sendMsg">发送</button>
			</view>
			<view class="toolbar">
				<image src="../../static/voice.svg" mode="aspectFit" @click="tab='voice'"></image>
				<image src="../../static/picture.svg" mode="aspectFit" @click="tab='picture'"></image>
				<image src="../../static/video.svg" mode="aspectFit" @click="chooseVideo"></image>
				<image src="../../static/emoji.svg" mode="aspectFit" @click="chooseEmoji"></image>
				<image src="../../static/redpackage.svg" mode="aspectFit" @click="tab='redpackage'"></image>
				<image src="../../static/gif.svg" mode="aspectFit"></image>
				<image src="../../static/more.svg" mode="aspectFit" @click="tab='more'"></image>
			</view>
			
			<scroll-view class="toolarea" scroll-y="true" v-if="tab=='emoji'">
				<uni-grid :column="7" :square="false" :showBorder="false">
					<uni-grid-item v-for="(emoji, idx) in emojis.default.emojis" :key="idx">
						<view @longtap="sendBigEmoji(idx)" class="emoji-showcase" @click="appendEmoji(idx)">
							<image draggable :src="`https://images-1256063599.cos.ap-shanghai.myqcloud.com/emojis/${emoji.name}.svg`" mode="aspectFit"></image>
							<text>{{emoji.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</scroll-view>
			
			<view class="toolarea" v-else-if="tab=='picture'">
				<scroll-view style="width: 730rpx;height:100rpx;flex-grow: 1;flex-shrink: 1;"  scroll-x :scroll-y="false"  >
					<view class="showcase">
						<image lazy-load webp mode="heightFix" v-for="(img, idx) in pics" :key="idx"
						:src="img.url"></image>
					</view>
				</scroll-view>
				<view style="flex-grow: 0;flex-shrink: 0;">
					<button type="primary" size="mini" @click="showAlbum">相册</button>
					<button type="primary" size="mini">网络图</button>
					<button type="primary" size="mini">用户图</button>
					<button type="primary" size="mini">换一批</button>
				</view>
			</view>
			
			<view v-else-if="tab=='voice'" class="toolarea">
				<view class="btn-circle" @touchstart="startRecord" @touchend="endRecord">
					<img src="../../static/voice.svg" alt="对讲"/>
				</view>
			</view>
			
			<view v-else-if="tab=='redpackage'" class="toolarea">
				<uni-grid :column="4" :square="true" :showBorder="false">
					<uni-grid-item>
						<view @click="sendRedPackags" style="display: flex;flex-direction: column;align-items: center;">
							<image src="../../static/redpackage_back.svg" mode="heightFix" style="height: 80rpx;"></image>
							<view>普通红包</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<image src="../../static/redpackage_back.svg" mode="heightFix" style="height: 80rpx;"></image>
							<view>手气红包</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<image src="../../static/redpackage_back.svg" mode="heightFix" style="height: 80rpx;"></image>
							<view>口令红包</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<image src="../../static/redpackage_back.svg" mode="heightFix" style="height: 80rpx;"></image>
							<view>语音红包</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<image src="../../static/redpackage_back.svg" mode="heightFix" style="height: 80rpx;"></image>
							<view>生僻字红包</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view style="display: flex;flex-direction: column;align-items: center;">
							<image src="../../static/redpackage_back.svg" mode="heightFix" style="height: 80rpx;"></image>
							<view>K歌红包</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view v-else-if="tab=='gif'" class="toolarea">
				
			</view>
			<view v-else-if="tab=='more'" class="toolarea tab-more">
				<uni-grid :column="5">
					<uni-grid-item>
						<view @click="sendFile" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>文件</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendLoc" class="btn">
							<image src="../../static/location.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>位置</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendVibrate" class="btn">
							<image src="../../static/shake.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>戳一戳</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="startTuya" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>涂鸦</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendUser" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>名片</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendCollect" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>收藏</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendGift" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>送礼</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendMoney" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>转账</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="shareScreen" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>分享屏幕</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendSongs" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>点歌</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendAlbum" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>相册</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendTable" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>表格</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendList" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>清单</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view style="display: flex;flex-direction: column;align-items: center;margin: auto+;">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>提问</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendFormula" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>公式</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendCode" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>代码</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendGraphics" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>图形</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="send3D" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>3D模型</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view @click="sendAd" class="btn">
							<image src="../../static/file.svg" mode="heightFix" style="height: 80rpx;"></image>
							<text>广告</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		
			<view v-else-if="tab=='tuya'">
				<sign-pad ref="sign" class="pad" style="background-color: white;display: block;width:100%"></sign-pad>
				<view style="display: flex;flex-direction: row;flex-wrap: nowrap;">
					<button type="primary" @click="clearSign">清空</button>
					<button type="primary" @click="sendTuya">发送</button>
					<evan-checkbox v-model="tuya.nofuzzy">无损缩放</evan-checkbox>
				</view>
			</view>
		</view>
		<popmenu v-if="selidx>=0 && msgs[selidx].MIME=='text'" :items="['撤回', '回复', '删除','收藏','转发', '+1']" @click="selmnu"></popmenu>
		<popmenu v-if="selidx>=0 && msgs[selidx].MIME=='image'" :items="['撤回', '回复', '删除','收藏','转发', '+1', '保存相册']" @click="selmnu"></popmenu>
		<popmenu v-if="selidx>=0 && msgs[selidx].MIME=='file'" :items="['撤回', '回复', '删除','收藏','转发', '+1', '重新下载', '预览', '另存为', '打开为']" @click="selmnu"></popmenu>
	</view>
</template>

<script>
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import emojis from '@/static/emojis/default/index.json'
	import editDiv from '@/components/edit-div/edit-div.vue'
	import redPackage from '@/components/RedPackage/RedPackage.vue'
	import popmenu from '@/components/popmenu/popmenu.vue'
	import evanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue'
	
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay=true
	export default {
		components:{
			cmdAvatar, editDiv, redPackage, popmenu, evanCheckbox,
		},
		onLoad() {
			recorderManager.onStop(res=>{
				this.recording = res.tempFilePath
				innerAudioContext.src = this.recording
				innerAudioContext.play()
			})
		},
		data() {
			return {
				tuya:{
					nofuzzy: false,
				},
				selidx:-1,
				textStyle:'',
				recording:'',
				original:false,
				send:'',
				tab:'',
				emojis:{
					default:emojis,
				},
				pics:[
					{
						width:'', height:'',
					 url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic23.nipic.com%2F20120919%2F3709274_212712129000_2.jpg&refer=http%3A%2F%2Fpic23.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623497023&t=13f811fc4362135fc1bc0104b8ad3d98'
					 },
					 {
					 	width:'', height:'',
					  url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic23.nipic.com%2F20120919%2F3709274_212712129000_2.jpg&refer=http%3A%2F%2Fpic23.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623497023&t=13f811fc4362135fc1bc0104b8ad3d98'
					 },
					 {
					 	width:'', height:'',
					  url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic23.nipic.com%2F20120919%2F3709274_212712129000_2.jpg&refer=http%3A%2F%2Fpic23.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623497023&t=13f811fc4362135fc1bc0104b8ad3d98'
					 },
				],
				msgs:[
					{
						type:"time", time:new Date().toLocaleTimeString(),
					},
					{
						type:"dialog",
						MIME:'text',
						self:true, avatar: '../../static/avatar.png', 
						msg:'adaed啊额上次发v啊得分分分额飞飞飞非常热是充分认识VC虽然法测定防水防尘复测人',
						status:'已读'
					},
					{	type:"dialog", MIME:'text',
						avatar: '../../static/avatar.png',
						msg:'adaed啊额上次发v啊得分分分额飞飞飞非常热是充分认识VC虽然法测定防水防尘复测人',
					},
					{
						type:"dialog", MIME:'image',
						avatar: '../../static/avatar.png',
						url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2843690879,3387531186&fm=26&gp=0.jpg',
					}
				]
			}
		},
		methods: {
			test(){
				alert("ssss")
			},
			clearSign(){
				this.$refs.sign.clear()		
			},
			
			sendTuya(){
				const asSvg = this.$refs.sign.export(this.tuya.nofuzzy?'svg':'canvas', {trim: false, ink: 'blue' });
				const id = `tuya_${Math.random()}`
				asSvg.toBlob(blob => {
					const msg = {
						id,
						type: 'dialog', MIME:'tuya', self: true,
						blob,
					}
					const reader = new FileReader()	
					reader.readAsDataURL(blob)
					reader.onload=(e)=>{
						msg.dataurl = e.target.result
						this.msgs.push(msg)
					}
				}, 'image/png');
				console.log(asSvg)
			},
			
			openLocation(idx){
				const loc = this.msgs[idx]
				uni.openLocation({
					name:loc.name,
					address:loc.address,
					longitude:loc.longitude,
					latitude:loc.latitude,
				})
			},
			showmnu(idx){
				this.selidx=idx
			},
			vibrate(){
				uni.vibrateLong()
			},
			sendFile(){
				uni.chooseFile({
					count:1, 
					success: (res) => {
						const file = res.tempFiles[0]
						this.msgs.push({
							type:'dialog', MIME:'file', self:true,
							size: file.size, name: file.name, filetype: file.type, path: file.path, icon: null, 
						})
					}
				})
			},
			sendLoc(){
				uni.chooseLocation({
					success: (res) => {
						this.msgs.push({
							type:'dialog', MIME:'location', self:true,
							name: res.name, address: res.address, latitude: res.latitude, longitude:res.longitude,
						})
					}
				})
			},
			selmnu(idx){
				console.log(idx)
				switch(idx){
					case '撤回':
					this.msgs.splice(this.selidx, 1, {
						type:'withdraw', who:'小宝贝',
					})
					break;
					case '删除':
					this.msgs.splice(this.selidx, 1)
					break
					case '+1':
					this.msgs.push({
						...this.msgs[this.selidx],
						self:true,
					})
					break;
					case '预览':
					break;
					case '翻译':
					break;
					case '保存相册':
					break;
				}
				this.selidx=-1
			},
			sendRedPackage(){
				this.msgs.push({
					type:'dialog', MIME:'redpackage', self:true,
					text: "恭喜你发财", money: 1.00, 
				})
			},
			sendVibrate(){
				this.msgs.push({
					type:'dialog', MIME:'shake', self:true,
				})
				uni.vibrateLong()
			},
			appendHr(){
				this.$refs.input.insert(`<hr/><br/>`)
				this.$refs.input.$el.focus()
			},
			chooseVideo(){
				uni.chooseVideo({
					success: (res) => {
						this.msgs.push({
							type:'dialog', MIME:'video', self:true,
							url: res.tempFilePath,
						})
					}
				})
			},
			chooseEmoji(){
				this.tab='emoji'
				this.$refs.input.$el.focus()
			},
			startRecord(){
				console.log(recorderManager)
				recorderManager.start()
			},
			endRecord(){
				recorderManager.end();
			},
			sendBigEmoji(idx){
				const emoji = this.emojis.default.emojis[idx].name
				this.msgs.push({
					type:'dialog', MIME: 'emoji', emoji,
					self:true, 
				})
			},
			inputing(text){
				this.send = text
			},
			appendEmoji(idx){
				const emoji = this.emojis.default.emojis[idx]
				this.$refs.input.$el.focus()
				console.log("focus", getSelection().anchorOffset)
				this.$refs.input.insert(`<image class="emoji" src="https://images-1256063599.cos.ap-shanghai.myqcloud.com/emojis/${emoji.name}.svg"/>`);
			},
			appendSup(){
				this.$refs.input.$el.focus()
				if(this.textStyle!='sup'){
					this.textStyle='sup'
					this.$refs.input.insert(`<sup>&#x200B;</sup>`)
				}else{
					this.textStyle=''
					this.$refs.input.insert(`&#x200B;`)
				}
			},
			appendBackcol(){
				this.$refs.input.$el.focus()
				if(this.textStyle!='backcol'){
					this.textStyle='backcol'
					this.$refs.input.insert(`<text style="background-color:gray">&#x200B;</text>`)
				}else{
					this.textStyle=''
					this.$refs.input.insert(`&#x200B;`)
				}
			},
			appendCenter(){
				this.$refs.input.$el.focus()
				if(this.textStyle!='center'){
					this.textStyle='center'
					this.$refs.input.insert(`<center>&#x200B;</center>`)
				}else{
					this.textStyle=''
					this.$refs.input.insert(`&#x200B;`)
				}
			},
			appendSub(){
				this.$refs.input.$el.focus()
				if(this.textStyle!='sub'){
					this.textStyle='sub'
					this.$refs.input.insert(`<sub>&#x200B;</sub>`)
				}else{
					this.textStyle=''
					this.$refs.input.insert(`&#x200B;`)
				}
			},
			appendBold(){
				this.$refs.input.$el.focus()
				if(this.textStyle!='bold'){
					this.textStyle='bold'
					this.$refs.input.insert(`<b>&#x200B;</b>`)
				}else{
					this.textStyle=''
					this.$refs.input.insert(`&#x200B;`)
				}
			},
			previewImg(idx){
				uni.previewImage({
					urls:[this.msgs[idx].url, ],
				})
			},
			/**
			 * 相册
			 */
			showAlbum(){
				uni.chooseImage({
					sourceType:['album', 'camera'],
					sizeType:['original'],
					success: (res) => {
						this.msgs.push(...res.tempFilePaths.map(pic=>{
							return {
								type:'dialog', self:true, avatar: '../../static/avatar.png',
								 MIME: 'image', url: pic,
							}
						}))
					}
				})
			},
			startTuya(){
				this.tab="tuya"
			},
			sendMsg(evt){
				this.msgs.push({
					type:'dialog', MIME: 'text', msg:this.$refs.input.content().replace(/\n/g, '<br/>'),
					self:true, avatar: '../../static/avatar.png', 
				})
				this.$refs.input.clear()
			},
			changeSend(evt){
				console.log(evt)
			}
		}
	}
</script>

<style scoped>
	page{
		height: 100%;
	}
	.tab-emoji{
		column-count: 7;
	}
	
	textarea{
		flex-grow: 1;
		flex-shrink: 1;
		background-color: white;
		border-radius: 1em;
		padding: 10rpx 0.5em;
	}
	
	.btn{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: auto;
	}
	
	.toolarea{
		height: 500rpx;
		min-height: 500rpx;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}
	
	.input-area{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		box-sizing: border-box;
		align-items: center;
	}
	
	.send{
		flex-grow:0;
		flex-shrink:0;
		background-color: lightgray;
		padding: 10rpx;
	}
	
	
	.toolbar{
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		padding: 10rpx 0;
	}
	
	.toolbar image{
		width: 50rpx;
		height: 50rpx;
	}
	
	.text-helper{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: space-evenly;
		align-items: stretch;
	}
	
	.text-helper image{
		flex-grow: 1;
		flex-shrink: 1;
		height: 40rpx;
		width: 40rpx;
	}
	
	.loc-msg{
		max-width: 500rpx;
		background-color: white;
	}
	
	.input-area [contenteditable]{
		flex-grow: 1;
		flex-shrink: 1;
		border-radius: 1em;
		background-color: white;
		padding: 0.25em 0.5em;
		border: none;
		user-select: all;
	}

	
	.block{
		margin: 10rpx 0;
	}
	
	.time{
		font-size: small;
		color: gray;
	}
	
	.tab-pic{
		width:750rpx;
		box-sizing: border-box;
	}
	
	.showcase{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 100%;
	}
	
	.showcase image{
		height: 100%;
		flex-grow: 0;
		flex-shrink: 0;
		margin: 0 10rpx;
	}
	
	.msg{
		display: flex;
		flex-direction: row;
	}
	
	.shake-msg{
		background-color: #007AFF;
		padding: 0.5em;
		border-radius: 20rpx;
		color: white;
		vertical-align: middle;
		line-height: 1.5em;
	}
	
	.shake-msg>*{
		vertical-align: middle;
	}
	
	.text-msg{
		background-color: #007AFF;
		padding: 0.5em;
		border-radius: 20rpx;
		min-width: 1em;
		max-width: 480rpx;
		min-height: 1em;
		max-height: 10em;
		color: white;
		vertical-align: middle;
	}
	
	.file-msg{
		display: flex;
		flex-direction: row;
		background-color: #007AFF;
		height: 100rpx;
		padding: 15rpx;
		border-radius: 20rpx;
	}
	
	.msg .content{
		display: flex;
		flex-direction: column;
	}
	
	.statuses{
		display: flex;
		flex-direction: row-reverse;
	}
	
	text, view{
		vertical-align: middle;
	}
	
	.emoji-showcase{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.emoji-showcase image{
		width: 50rpx;
		height: 50rpx;
	}
	
	uni-grid-item{
		display: flex!important;
		flex-direction: row;
		align-items: center;
	}
	
	.emoji-showcase text{
		font-size: smaller;
		color: black;
	}
	
	checkbox{
		margin: 0!important;
	}

</style>
